<template>
  <k-form-modal
    ref="formRef"
    drawer
    center
    width="650px"
    :title="state.mode === 1 ? '编辑商品' : '创建商品'"
    label-width="82px"
    v-bind="formModalState"
    v-on="formModalEvent"
  >
    <div class="title">{{ state.mode === 1 ? '编辑商品' : '创建商品' }}</div>
    <el-form-item label="商品ID" prop="product_id" :rules="[{ required: true, message: '请输入商品ID' }]">
      <el-input v-model="state.model.product_id" placeholder="请输入" />
    </el-form-item>
    <el-form-item prop="activity_id" :rules="[{ required: true, message: '请输入关联活动信息ID' }]">
      <template #label>
        <div class="link-label">
          <div>关联活动</div>
          <div>信息ID</div>
        </div>
      </template>
      <el-input v-model="state.model.activity_id" placeholder="请输入" />
    </el-form-item>
    <el-form-item prop="priority" :rules="[{ required: true, message: '请设置优先级' }]">
      <template #label>
        <div class="priority-label">
          优先级
          <el-tooltip content="数值越大，展示排序越靠前" placement="top">
            <img width="16" height="16" src="@/assets/images/icons/question-help.png">
          </el-tooltip>
        </div>
      </template>
      <el-input v-model="state.model.priority" placeholder="请输入" />
    </el-form-item>
    <el-form-item label="上架状态" prop="status">
      <el-switch v-model="state.model.status" :active-value="1" :inactive-value="2" active-text="上架" inactive-text="下架" @change="onChange" />
    </el-form-item>
  </k-form-modal>
</template>

<script setup lang="ts">
import { defineComponent, ref } from 'vue';
import { ElMessage } from 'element-plus';
import { useFormModal, baseConfirm } from '@crud/index';
import { slotProductAdd, slotProductEdit } from '@/api/crm-kgj/slot';
defineComponent({ name: 'CreateProductDrawer' });
const emits = defineEmits(['submit']);

const formRef = ref();
const { state, formModalState, formModalEvent, ...methods } = useFormModal({
  formRef,
  model: {
    product_id: '',
    activity_id: '',
    priority: '',
    status: 1
  },
  onShow: (mode = 0, data: any) => {
    if (data) {
      state.model = data;
    }
  },
  onSubmit: async (model: any, mode = 0) => {
    const api = mode === 1 ? slotProductEdit : slotProductAdd;
    const res = await api(model);
    if (!res.err) {
      ElMessage.success(mode===1 ? '编辑成功': '创建成功');
      emits('submit');
    }
    return res;
  }
});
// 上架状态
const onChange = async(val: number) => {
  if (val === 2) {
    state.model.status = 1;
    const res = await baseConfirm({ type: 'none', title: '下架商品', message: '该商品状态将变更为下架状态，无法在掘金展示，如需继续请点击确认。' });
    if (res) state.model.status = 2;
  }
};

defineExpose({
  show: methods.show
});
</script>

<style lang="scss" scoped>
.title {
  margin-bottom: 18px;
  font-size: 18px;
  font-weight: 500;
  line-height: 26px;
  color: #303133;
}

.link-label {
  line-height: 18px;
  text-align: right;
}

.priority-label {
  display: flex;
  align-items: center;
}
</style>
